import React, { useEffect, useState } from 'react';
import { history } from 'umi';
import { Avatar, Col, Row, Spin } from 'antd';
import { eventTrack } from '@/utils/track';
import request from '@/utils/request';
import styles from '@/pages/Organization/Orgs/View.less';
import LinkTo from '@/components/LinkTo';

const PersonContent = ({ postName, managerId, managerPostName, id }) => {
    const [detail, setDetail] = useState({});
    const [loading, setLoading] = useState(false);
    useEffect(() => {
        const fetchData = async () => {
            if (managerId !== '') {
                setLoading(true);
                const result = await request(
                    `/api/oa/v1/employee/getorgemployeeinfo?emplyeeId=${managerId || id}&postName=${managerPostName ||
                        postName}`,
                    {
                        method: 'GET'
                    }
                );
                if (result.code === 10000) {
                    setDetail(result.data);
                }
                setLoading(false);
            }
        };
        fetchData();
    }, []);
    return (
        <Spin spinning={loading}>
            <Row
                type="flex"
                gutter={16}
                justify="space-between"
                className={styles.personBoxRow}
                style={{ marginLeft: '8px', marginRight: '8px' }}
            >
                <Col style={{ paddingLeft: '0px', paddingRight: '0px' }}>
                    {detail.avatarFile && detail.avatarFile.length > 0 ? (
                        <img alt="" className={styles.avatar} src={detail.avatarFile[0].url} />
                    ) : (
                        <Avatar size={64} icon="user" />
                    )}
                </Col>
                <Col className={styles.personContent} style={{ paddingLeft: '16px' }}>
                    <div className={styles.userName}>{detail.employeeName || ''}</div>
                    <div className={styles.info}>
                        {detail.departmentPath || ''}
                        {detail.departmentPath && '-'}
                        {detail.postName || ''}
                    </div>
                    <Row type="flex">
                        <Col className={styles.left}>职级：</Col>
                        <Col className={styles.right}>{detail.employeeRank || ''}</Col>
                    </Row>
                    <Row type="flex">
                        <Col className={styles.left}>状态：</Col>
                        <Col className={styles.right}>{detail.inServiceStatus || ''}</Col>
                    </Row>
                    <Row type="flex" style={{ marginBottom: '16px' }}>
                        <Col className={styles.left}>职责：</Col>
                        <Col className={styles.right}>
                            <div className={styles.tags}>
                                {Array.isArray(detail.jobLabel) && detail.jobLabel.map(label => <span>{label}</span>)}
                            </div>
                        </Col>
                    </Row>
                    <LinkTo
                        // 埋点
                        onClick={async (e, url) => {
                            await eventTrack({
                                eventName: 'organization_orgDetail_orgStaffDetail_click',
                                eventProps: {
                                    deptment_path: '',
                                    employee_id: detail.id
                                }
                            });
                            history.push(url);
                        }}
                        to="/office/personnelManagement/organization/employeeList/detail"
                        query={{
                            employeeCode: detail.employeeCode
                        }}
                    >
                        查看员工详情
                    </LinkTo>
                </Col>
            </Row>
        </Spin>
    );
};

export default PersonContent;
